<template>
    <div class="column gap25">

        <div class="row gap15 shrink0 item-center" >
            <input ref="refIptFiles" type="file" @change="onFileChanged" multiple>

            <span>{{ imgFiles.length }}</span>
            <n-button @click="imgFiles.length=0">清空</n-button>
            <span class="grow"></span>

            <n-button v-show="!capture.capturing" @click="start">开始推送</n-button>
            <n-button v-show="capture.capturing" @click="capture.stop()">停止推送 {{capture.frmIdx}}</n-button>
        </div>
        <div class="grow row gap5 item-start" style="overflow:scroll; width: 100%; margin-top: 20px" ref="refImages">
            <img  v-for="file,imgIdx in imgFiles" style="max-height: 240px; max-width: 320px;" 
                    :title="'frame:'+imgIdx" 
                    :src="createObjectURL(file)" 
                    reff="refImgs"
                    @click="projImage(imgIdx)">
        </div>
        
    </div>
</template>


<script setup lang="ts">
import { ref, onMounted, reactive, Ref, inject } from 'vue'
import {FrameBuffer} from './FrameBuffer'
import {CaptureFrames} from './Capture'
import { bus } from '@beshell/events-ts/bus';

const frameBuffer = inject<FrameBuffer>("frameBuffer") as FrameBuffer

const stageWidth = inject("stageWidth") as Ref<number>
const stageHeight = inject("stageHeight") as Ref<number>

const capture = reactive(new CaptureFrames('frames', frameBuffer))

const imgFiles = ref([]) as unknown as Ref<File[]>
const refImages = ref<any>(null)
// const refImgs = ref<HTMLImageElement[]>([])

// const imgs: HTMLImageElement[] = []
const getImage = (el:any) => {
    capture.frames.push(el)
}

const createObjectURL = URL.createObjectURL

onMounted(()=>{
    window.capture = capture
    // window.refImgs = refImgs
    window.refImages = refImages
    // capture.attach(refVideo.value)
    // capture.setStageSize(stageWidth.value, stageHeight.value)
})

function getCapture() {
    return capture
}

function onFileChanged(e:any) {
    if(!e?.target?.files.length) {
        return
    }
    imgFiles.value.push(... (e.target.files as any[]))
}

function start() {
    if(!refImages.value || !refImages.value.children.length) {
        console.log("empty images")
        return
    }
    capture.start(refImages.value.children, 10)

    bus.emit("projection.start()")
}

function projImage(imgIdx){
    
}

defineExpose({getCapture})
</script>